<template>
  <el-drawer
    title="添加 / 编辑"
    size="70%"
    @close="drawerClosed"
    :visible.sync="visible">
    <template slot="title">
      <span class="title">添加 / 编辑</span>
      <div class="btn-wrap">
        <el-button size="small" @click="close">关闭</el-button>
        <el-button type="primary" size="small" @click="save">保存</el-button>
      </div>
    </template>
    <div class="modify common-container">
      <div class="common-bot">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item required label="分类">
            <el-select v-model="form.category" placeholder="请选择分类">
              <el-option
                v-for="item in categories"
                :key="item.name"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item required label="名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item required label="镜像">
            <el-input v-model="form.image"></el-input>
          </el-form-item>
          <el-form-item required label="模板描述">
            <el-input v-model="form.description" type="textarea" :rows="2"></el-input>
          </el-form-item>
          <el-form-item required label="端口映射">
            <el-button type="primary" icon="el-icon-plus" size="mini" style="padding: 3px 7px;border-radius: 5px"
                       @click.stop="addPort">
              添加
            </el-button>
            <div v-for="(port,idx) in form.config.ports" :key="idx" style="margin: 3px 0">
              <el-input placeholder="请输入主机端口" v-model="port.host" style="width: 250px">
                <template slot="prepend">主机端口</template>
              </el-input>
              <i class="el-icon-right" style="margin: 0 10px"></i>
              <el-input placeholder="请输入容器端口" v-model="port.container" style="width: 250px">
                <template slot="prepend">容器端口</template>
              </el-input>
              <el-radio-group size="mini" v-model="port.type" style="margin-left: 10px">
                <el-radio-button label="tcp">TCP</el-radio-button>
                <el-radio-button label="udp">UDP</el-radio-button>
              </el-radio-group>
              <el-button size="mini" type="danger" icon="el-icon-delete" @click.stop="delPort(idx)"
                         style="margin-left: 10px;padding: 5px 5px;"></el-button>
            </div>
          </el-form-item>
          <el-form-item label="环境变量">
            <el-button type="primary" icon="el-icon-plus" size="mini" style="padding: 3px 7px;border-radius: 5px"
                       @click.stop="addEnv">
              添加
            </el-button>
            <div v-for="(env,idx) in form.config.envs" :key="idx" style="margin: 3px 0">
              <el-input placeholder="请输入环境变量名称" v-model="env.key" style="width: 330px">
                <template slot="prepend">变量名称</template>
              </el-input>
              <i class="el-icon-right" style="margin: 0 10px"></i>
              <el-input placeholder="请输入环境变量值" v-model="env.value" style="width: 330px">
                <template slot="prepend">变量值</template>
              </el-input>
              <el-button size="mini" type="danger" icon="el-icon-delete" @click.stop="delEnv(idx)"
                         style="margin-left: 10px;padding: 5px 5px;"></el-button>
            </div>
          </el-form-item>
          <el-form-item label="数据卷">
            <el-button type="primary" icon="el-icon-plus" size="mini" style="padding: 3px 7px;border-radius: 5px"
                       @click.stop="addVolume">
              添加
            </el-button>
            <div v-for="(volume,idx) in form.config.volumes" :key="idx" style="margin: 3px 0">
              <el-input placeholder="e.g.path/in/container" v-model="volume.container" style="width: 350px">
                <template slot="prepend">容器路径</template>
              </el-input>
              <!--            <el-radio-group size="mini" v-model="volume.type" style="margin-left: 10px">-->
              <!--              <el-radio-button label="Volume"></el-radio-button>-->
              <!--              <el-radio-button label="Bind"></el-radio-button>-->
              <!--            </el-radio-group>-->
              <i class="el-icon-right" style="margin: 0 10px"></i>
              <el-input placeholder="请输入主机路径" v-model="volume.host" style="width: 350px">
                <template slot="prepend">主机路径</template>
              </el-input>
              <el-radio-group size="mini" v-model="volume.readable" style="margin-left: 10px">
                <el-radio-button label="rw">Writable</el-radio-button>
                <el-radio-button label="ro">Readonly</el-radio-button>
              </el-radio-group>
              <el-button size="mini" type="danger" icon="el-icon-delete" @click.stop="delVolume(idx)"
                         style="margin-left: 10px;padding: 5px 5px;"></el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import Api from "@/api/";

export default {
  data() {
    return {
      visible: false,
      form: {
        formId: 0,
        category: "",
        name: "",
        image: "",
        description: "",
        config: {
          ports: [],
          envs: [],
          volumes: []
        }
      },
      categories: [],
    };
  },
  methods: {
    addPort() {
      this.form.config.ports.push({
        host: '',
        container: '',
        type: 'tcp'
      })
    },
    delPort(idx) {
      this.form.config.ports.splice(idx, 1)
    },
    addEnv() {
      this.form.config.envs.push({
        key: '',
        value: ''
      })
    },
    delEnv(idx) {
      this.form.config.envs.splice(idx, 1)
    },
    addVolume() {
      this.form.config.volumes.push({
        container: '',
        host: '',
        type: 'Bind',
        readable: 'rw'
      })
    },
    delVolume(idx) {
      this.form.config.volumes.splice(idx, 1)
    },
    show(id) {
      this.visible = true
      Api.constant.all().then(res => {
        this.categories = res.extra['TEMPLATE_CATEGORY']
      })
      if (id) this.getInfo(id)
      else this.resetForm()
    },
    close() {
      this.visible = false
    },
    drawerClosed() {
      this.$emit('close')
    },
    resetForm() {
      this.form = {
        formId: 0,
        category: "",
        name: "",
        image: "",
        description: "",
        config: {
          ports: [],
          envs: [],
          volumes: []
        }
      };
    },
    getInfo(id) {
      Api.dockerTemplate.detail({
        targetId: id,
      }).then((res) => {
        this.form = res.data
        this.form.formId = res.data.id
        delete this.form.id
      });
    },
    checkInfo() {
      if (String(this.form.name).trim() == "") {
        this.$message({
          type: "error",
          message: "请填写名称",
        });
        return false;
      }
      if (String(this.form.image).trim() == "") {
        this.$message({
          type: "error",
          message: "请填写镜像地址",
        });
        return false;
      }
      return true;
    },
    save() {
      if (!this.checkInfo()) {
        return;
      }
      Api.dockerTemplate.modify(this.form).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.$emit("close");
          this.close()
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.modify {
  .common-bot {
    width: 100%;
    padding: 30px 10px;
  }
}
</style>
